<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移与碰撞</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<canvas id="mainCanvas"></canvas>
</body>
<script>
    let scene, camera, renderer, leftPress, cube;
    init();
    helper();
    createBoxer();
    animate();

    function init() {
        // 初始化场景
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        // 创建渲染器
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById("mainCanvas"),
            antialias: true, // 抗锯齿
            alpha: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);


        // 创建透视相机
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 30);
        camera.lookAt(0, 0, 0);

        // 参数初始化
        mouse = new THREE.Vector2();
        raycaster = new THREE.Raycaster();

        // 环境光
        var ambientLight = new THREE.AmbientLight(0x606060);
        scene.add(ambientLight);
        // 平行光
        var directionalLight = new THREE.DirectionalLight(0xBCD2EE);
        directionalLight.position.set(1, 0.75, 0.5).normalize();
        scene.add(directionalLight);
    }

    function helper() {
        var grid = new THREE.GridHelper(100, 20, 0xFF0000, 0x000000);
        grid.material.opacity = 0.1;
        grid.material.transparent = true;
        scene.add(grid);

        var axesHelper = new THREE.AxesHelper(30);
        scene.add(axesHelper);
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    function createBoxer() {
        var geometry = new THREE.BoxGeometry(5, 5, 5);
        var material = new THREE.MeshPhongMaterial({color: 0x00ff00});
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
    }

    $(window).mousemove(function (event) {
        event.preventDefault();

        if (leftPress) {
            console.log(event.originalEvent.movementX/500)
            cube.rotateOnAxis(
                new THREE.Vector3(0, 1, 0),
                event.originalEvent.movementX / 500
            );
 
        }
    });

    $(window).mousedown(function (event) {
        event.preventDefault();
        leftPress = true;

    });

    $(window).mouseup(function (event) {
        event.preventDefault();
        leftPress = false;
    });
</script>
</html>